{% extends "base.html" %}
{% load i18n staticfiles %}
{% block title %}{% trans 'Section' %} {{ c_section.name }} | DCRM{% endblock %}
{% block stylesheet %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "css/content-list.css" %}">
{% endblock %}
{% block breadcrumbs %}
    <i class="fa fa-home"></i> <a href="{% url 'index' %}">{% trans 'Home' %}</a>
    <i class="fa fa-angle-right"></i> <a href="{% url "section_id" c_section.id %}">{{ c_section.name }}</a>
{% endblock %}
{% block content %}
    <div class="content-list">
        <div class="title"><h2>{{ c_section.name }}</h2></div>
        <div class="list grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'>
            {% for package in package_list %}
                <a href="{% url "package_id" package.id %}">
                    <div class="list-item grid-item">
                        <div class="icon">
                            {% if package.display_icon %}
                                <img src="{{ package.display_icon }}"/>
                            {% else %}
                                <img src="{% static 'img/default-package-icon.png' %}"/>
                            {% endif %}
                        </div>
                        <div class="title-tag">
                            <div class="title">
                                {{ package.c_name | default:_("Untitled Package") }}
                            </div>
                            <div class="go"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
        <div class="clear"></div>
        {% include 'pagination-in-section.html' %}
    </div>
{% endblock %}